import React, { Component, PropTypes } from 'react'
import { Picker, List, InputItem, Icon, Checkbox, Toast } from 'antd-mobile'
import { createForm } from 'rc-form'
import { config, myFetch } from '../utils'
import { AgreementProtocol } from './'

const { AgreeItem } = Checkbox

// mock data
const data = [
  {
    value: Math.random(),
    label: '爱国福',
  },
  {
    value: Math.random(),
    label: '富强福',
  },
  {
    value: Math.random(),
    label: '友善福',
  },
  {
    value: Math.random(),
    label: '和谐福',
  },
  {
    value: Math.random(),
    label: '敬业福',
  },
]

class RegisterFormWrapper extends Component {
  constructor() {
    super()
    this.cache = false
    this.register = this.register.bind(this)
    this.fetchMemberList = this.fetchMemberList.bind(this)
    this.state = {
      protocolModal: false,
      memberList: [],
    }
  }
  render() {
    const { form: { getFieldProps, setFieldsValue } } = this.props
    const { protocolModal, memberList } = this.state
    return (
      <div className={`cm-scrollable-container`}>
        {/*<div className={`cm-picker-wrapper`}>
          <Picker
            data={memberList}
            cols={1}
            extra="选择会员单位"
            {...getFieldProps('memberArr')}
          >
            <List.Item
              arrow="down"
              onClick={this.fetchMemberList}
            />
          </Picker>
        </div>*/}

        <Picker
          data={memberList}
          cols={1}
          extra="选择会员单位"
          {...getFieldProps('memberArr')}
        >
          <List.Item
            className={`cm-picker-box`}
            onClick={this.fetchMemberList}
          >
            <Icon type="caret-down" />
          </List.Item>
        </Picker>

        <InputItem
          placeholder="请输入手机号码"
          className={`cm-input-item`}
          extra={<Icon type="phone" />}
          {...getFieldProps('phoneNumber', {
            initialValue: '',
          })}
        />

        <div className={`cm-captcha-box`}>
          <InputItem
            className={`cm-input-item`}
            placeholder="请输入收到的验证码"
            {...getFieldProps('captcha', {
              initialValue: '',
            })}
          />
          <div className={`cm-cpatch-btn`}>
            获取验证码
          </div>
        </div>

        <InputItem
          placeholder="请输入密码"
          className={`cm-input-item`}
          extra={<Icon type="lock" />}
          {...getFieldProps('password', {
            initialValue: '',
          })}
        />
        <InputItem
          placeholder="请输入推荐人手机号码（可选）"
          className={`cm-input-item`}
          {...getFieldProps('referrerPhoneNumber', {
            initialValue: '',
          })}
        />

        <AgreeItem
          className={`rt-checkbox-agree`}
          {...getFieldProps('agreement', {
            initialValue: false,
            valuePropName: 'checked',
          })}
        >
          <span>我已阅读</span>
          <span
            className={`rt-link`}
            onClick={e => {
              e.preventDefault()
              this.setState({
                protocolModal: true,
              })
            }}
          >
            《第三方托管协议》及《用户告知书》
          </span>
        </AgreeItem>

        <div
          className={`cm-main-button`}
          onClick={this.register}
        >
          注 册
        </div>

        <AgreementProtocol
          onClose={(arg = '') => {
            if (arg) {
              setFieldsValue({
                agreement: arg === 'refuse' ? false : true,
              })
            }
            this.setState({
              protocolModal: false,
            })
          }}
          visible={protocolModal}
        />
      </div>
    )
  }
  register() {
    const { form: { getFieldValue } } = this.props
    const agreement = getFieldValue('agreement')
    if (!agreement) {
      Toast.fail('请先同意注册协议', config.toastInterval)
      return
    }
    const memberArr = getFieldValue('memberArr')
    if (!memberArr || !memberArr[0]) {
      Toast.fail('请选择会员单位', config.toastInterval)
      return
    }
    const phoneNumber = getFieldValue('phoneNumber')
    if (!phoneNumber) {
      Toast.fail('请填写手机号码', config.toastInterval)
      return
    }
    const captcha = getFieldValue('captcha')
    if (!captcha) {
      Toast.fail('请填写验证码', config.toastInterval)
      return
    }
    const password = getFieldValue('password')
    if (!password) {
      Toast.fail('请填写密码', config.toastInterval)
      return
    }
    const referrerPhoneNumber = getFieldValue('referrerPhoneNumber')
    console.log(this.props.form.getFieldsValue())
  }
  fetchMemberList() {
    if (this.cache) return
    myFetch(`/infos/member/getlist`)
      .then(rs => {
        if (rs && rs.MemberList && rs.MemberList.length > 0) {
          const arr = [...rs.MemberList]
          const dataArr = []
          arr.forEach(v => {
            const o = {...v}
            o.value = v.ID
            o.label = v.Name
            dataArr.push(o)
          })
          this.setState({
            memberList: dataArr,
          }, () => {
            this.cache = true
          })
        }
      })
  }
}

export default createForm()(RegisterFormWrapper)